<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .rows {
            padding: 10px;
            height: 50px;
            width: 100%;
            border: 1px solid #ccc;
        }

        .rows img {
            float: left;
            height: 30px;
            vertical-align: middle;
        }

        .rows p {
            float: left;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
        }

        .left {
            float: left;
            background-color: yellow;
            width: 15%;
            height: 500px;
        }

        .right {
            float: left;
            background-color: red;
            width: 85%;
            height: 500px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id='app'>
        <div class="left">
            <hang @click="fn">
                啦啦啦
            </hang>
            <hang @click="$router.push('/login')">
                登录
            </hang>
            <hang @click="$router.push('/register')">
                注册
            </hang>

        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
    <template id="hang">
        <div class="rows" @click="click">
            <img src="./usermessage.png" alt="">
            <p>
                <slot></slot>
            </p>
        </div>
    </template>
    <template id="hang1">
        <div class="rows" @click="click">
            <img src="./usermessage.png" alt="">
            <p>
            <P>ssss</P>
            <slot></slot>
            </p>
        </div>
    </template>
    <script>
        const hang = {
            template: "#hang",
            methods: {
                click() {
                    this.$emit("click")
                }
            }
        }
        const hang1 = {
            template: "#hang1",
            methods: {
                click() {
                    this.$emit("click")
                }
            }
        }
        const rr = new VueRouter({
            routes: [{
                path: "/",
                redirect: "/register"
            },
            {
                path: "/register",
                component: hang
            },
            {
                path: "/login",
                component: hang1
            },
            ]
        })
        Vue.component("hang", hang)
        Vue.component("hang1", hang1)
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                fn() {
                    alert(111)
                }
            },
            router: rr
        })
    </script>
</body>

</html>